/* Main Mia-Chat CSS file */

h1 {
	font-size: 138.5%;
}

a:link,
a:visited,
a:hover,
a:active {
	color: blue;
}

/* Splitter */
/*
 * Splitter container. Set this to the desired width and height
 * of the combined left and right panes. In this example, the
 * height is fixed and the width is the full width of the body,
 * less the margin on the splitter itself.
 */
#chat-splitter {
	height: 470px;
	margin: 1em 3em;
	border: 3px solid #aaa;
	/* No padding allowed */
}
#right-pane-wrapper {
    margin: 5px;
}
#tabs.ui-widget-content {
    border: none;
}

/*
 * Left-side element of the splitter. Use pixel units for the
 * min-width and max-width; the splitter plugin parses them to
 * determine the splitter movement limits. Set the width to
 * the desired initial width of the element; the plugin changes
 * the width of this element dynamically.
 */
#left-pane {
	overflow: auto;
	width: 80%;
	/* No margin or border allowed */
}
/*
 * Right-side element of the splitter.
 */
#right-pane {
	overflow: auto;
	/* No margin or border allowed */
}
/* 
 * Splitter bar style; the .active class is added when the
 * mouse is over the splitter or the splitter is focused
 * via the keyboard taborder or an accessKey. 
 */
#chat-splitter .vsplitbar {
	width: 8px;
	background: #AAAAAA url(../includes/js/jquery/plugins/splitter/img/vgrabber.gif) no-repeat center;
}
#chat-splitter .vsplitbar.active {
	background: black url(../includes/js/jquery/plugins/splitter/img/vgrabber.gif) no-repeat center;
	opacity: 0.7;
}
/* End Splitter */


/* Start Buddylist */
#right-pane {
	background-color: #f5ffb6;
	font-size: 123.1%;
}

#right-pane h2 {
	padding: 3px 0 3px 35px;
	background-color: black;
	font-size: 138.5%;
 	font-weight: bold;
	color: white;
	margin: 5px 0 5px 0;
}

#right-pane ul {
	list-style-type: none;
	position: relative;
}

#right-pane ul li {
	padding: 0 0 5px 20px;
	cursor: pointer;
}

#right-pane ul li:hover {
	background-color: orange;
	border: thin black dotted;
	padding: 5px 5px 5px 20px;
}

#buddylist {
	overflow: auto;
	height: 325px;
}

#buddylist a {
	text-decoration: none;
    color: #000;
}

.online { background: url(../images/famfamfam_silk_icons/status_online.png) no-repeat; }
.away { background: url(../images/famfamfam_silk_icons/status_away.png) no-repeat; }
.busy { background: url(../images/famfamfam_silk_icons/status_busy.png) no-repeat; }
.offline { background: url(../images/famfamfam_silk_icons/status_offline.png) no-repeat; }

#manageBuddylist {
	border-top: thin black solid;
	padding-top: 5px;
}
/* End Buddylist */


/* Add Buddy */
#addBuddyFrm {
	padding-top: 5px;
}

#addBuddyFrm label {
	display: block;
	padding-top: 5px;
}

#addBuddyFrm fieldset {
	background-color: #f5ffb6;
	width: auto;
	padding: 10px;
}
/* End Add Buddy */


/* Manage Profile */
#manageProfileFrm {
	padding-top: 5px;
}

#manageProfileFrm label {
	display: block;
	padding-top: 5px;
}

#manageProfileFrm fieldset {
	background-color: #f5ffb6;
	width: auto;
	padding: 10px;
}

#manageProfileFrm #profUserName {
    font-weight: bold;
    color: #F00;
}

#activeBuddyList table, #searchResults table {
	width: 100%;
}

#searchResults table{
	margin-bottom: 10px;
}

#searchResults table th {
	background-color: #e6e6e6;
}

.addContact {
	text-align: center;
}
/* End Manage Profile */


/* Start Remove Buddy */
#activeBuddyList table th {
	background-color: #e6e6e6;
}

.removeContact {
	text-align: center;
}
/* End Remove Buddy */


/* Chat Window */
.innerChatWindow {
	border: medium black solid;
	height: 220px;
	overflow-y: scroll;
	padding: 5px 3px 5px 3px;
	background-color: #f8f8f8;
}

.innerChatWindow ul {
	list-style-type: none;
}

textarea.chatInput {
    width: 90%;
}

#emoticon {
	padding-left: 4%;
}

#emoticon li {
	display: inline;
	padding: 5px 2px 0 3px;
}

.emoButton {
	cursor: pointer;
}

.chatInput {
	background-color: #f5ffb6;
	margin: 3px 0 3px 25px;
	width: 92%;
}

.containerFooter {
	border: black medium solid;
	margin-bottom: 10px;
	padding: 5px 0 10px 0;
}

.messageHeaderOwner {
	color: white;
	background-color: #d06200;
	margin: 0 3% 0 3%;
}

.messageBodyOwner {
	color: black;
	background-color: #ffc77b;
	padding: 3px;
	margin: 0 3% 1% 3%;
}

.messageHeaderFriend {
	color: white;
	background-color: #007600;
	padding: 5px;
	margin: 0 3% 0 3%;
}

.messageBodyFriend {
	color: black;
	background-color: #69faa8;
	padding: 3px;
	margin: 0 3% 1% 3%;
}

.tab-close:hover {
	cursor: pointer;
}

.newMessageIndicator {
	color: red;
}
/* End Chat Window */


/* Login/Registration/Reset */
.errorMessage {
	border: medium dashed #007600;
	background-color: #e6e6e6;
	color: black;
	width: 90%;
	padding: 10px;
	margin-top: 15px;
	text-align: center;
}

#regFrm fieldset img {
    margin-top: 5px;
}

.login {
	margin: 5% 25% 10% 35%;
	width: 380px;
}

.login label {
	display: block;
	padding-top: 5px;
}

.login fieldset {
	background-color: #f5ffb6;
	padding: 10px;
}

.login fieldset p {
	padding-top: 5px;
}

.loginButton {
	margin-top: 8px;
}

.regButton {
	margin-top: 8px;
}

label.error {
	color: red;
	font-weight: bold;
}
/* End Login/Registration/Reset */


/* Used to fill/hide elements that can't have an empty on on page load per XHMTL validation (ex) ul */
.filler {
	display: none;
}

.hideme {
	display: none;
}

.blinker {
    color : #ff0000;
    font-weight: bold;
    text-decoration : blink;
}
